<template>
	<view style="overflow: hidden;">
		<uni-card>
			<uni-section title="维修申请信息" type="line">
				<uni-forms ref="form" :modelValue="formData" label-width="100px" :rules="formRules">
					<uni-forms-item label="维修单编号" required name="applyCode">
						<uni-easyinput v-model="formData.applyCode" placeholder="请输入维修单编号" />
					</uni-forms-item>
					<uni-forms-item label="设备" required name="equipId">
						<uni-data-select v-model="formData.equipId" :localdata="deviceList"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="申请内容">
						<uni-easyinput type="textarea" v-model="formData.applyContent" placeholder="请输入备注" />
					</uni-forms-item>
					<uni-forms-item label="图片">
						<button size="mini;" type="primary"
							style="border-radius: 5px;font-size:10px;width: 70px;" @click="uploadPic()"
							v-if="!formData.fileList[0].fileId">
							上传图片</button>
						<view v-else
							style="display: flex;flex-direction: row;align-items: center;">
							<view @click="openPic()" style="width: 50px;height: 50px;">
								<image mode="aspectFit" :src="formData.fileList[0].url"
									style="width: 50px;height: 50px;"></image>						
							</view>
							<uni-icons type="close" size="20" color="#acacac;"
								@click="deletePic()"></uni-icons>
						</view>
					</uni-forms-item>
				</uni-forms>
			</uni-section>
		</uni-card>
		<button type="primary" @click="submit()">提交</button>
		<uni-popup ref="IMAGE">
			<view>
				<image mode="aspectFit" :src="formData.fileList[0].url"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { listDeviceAll } from '@/common/api/device'
	import { update, add, getById } from '@/common/api/repair'
	export default {
		data() {
			return {
				// 表单参数
				formData: {
					applyCode: '',
					equipId: null,
					applyContent: '',
					fileList: [{
						fileId: '',
						name: '',
						url: ''
					}],
				},
				formRules: {
					applyCode : {
						rules: [{
							required: true,
							errorMessage: '任务名称不能为空'
						}]
					},
					equipId : {
						rules: [{
							required: true,
							errorMessage: '设备不能为空'
						}]
					}
				},
				deviceList: [],
				loading: false,
			}
		},
		components: {
		},
		onLoad(option) {
			if(option.id) {
				getById(option.id).then(res => {
					console.log(res, 'response')
					this.formData = res.data
				})
			}
			listDeviceAll().then(res => {
				console.log(res, 'device...')
				this.deviceList = res.data.map(item => ({
					value: item.id,  // 使用原数组中的 id 作为 value
					text: item.equipName // 使用原数组中的 sport 作为 text
				}));
			})
		},
		methods: {
			submit() {
				this.$refs['form'].validate().then(res => {
					console.log('success', res);
					if(this.formData.id) {
						// 编辑
						update(this.formData).then(res => {
							console.log(res, 'upload')
							if(res.respCode === '0000') {
								uni.showToast({
								  title: '编辑成功',
								  duration: 2000
								});
								uni.navigateBack()
							}
						})
					} else {
						// 新增
						add(this.formData).then(res => {
							console.log(res, 'upload')
							if(res.respCode === '0000') {
								uni.showToast({
								  title: '新增成功',
								  duration: 2000
								});
								uni.navigateBack()
							}
						})
					}
				}).catch(err => {
					console.log('err', err);
				})
			},
			uploadPic() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const imagePath = res.tempFilePaths[0]
						// 从本地获取 token
						const token = uni.getStorageSync('App-Token');
						uni.uploadFile({
							url: '/api/system/file/upload',
							filePath: imagePath,
							name: 'file',
							timeout: 60000,
							method: 'POST',
							header: {
								'Authorization': token ? `Bearer ${token}` : '', // 添加 token
							},
							success: (uploadFileRes) => {
								const data = JSON.parse(uploadFileRes.data)
								console.log('data', data)
								if (data.success) {
									this.formData.fileList = [{
										fileId: data.data.fileId,
										name: data.data.logicalName,
										url: data.data.prePath + data.data.fileName
									}]
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none',
									})
								}
							},
							fail: (err) => {
								console.log('上传失败', err)
								uni.showToast({
									title: '上传失败',
									icon: 'none',
								})
							}
						})
					},
					fail: (err) => {
						console.log('选择图片失败', err)
					}
				})
			},
			deletePic() {
				this.formData.fileList = [{
					fileId: '',
					name: '',
					url: ''
				}]
			},
			openPic() {
				this.$refs.IMAGE.open()
			},
			
		}
	}
</script>

<style>
	button {
		margin: 15px;
	}
</style>